<template>
    <div>
        <div class="allData" style='margin-bottom: 50px'>
            <TableSearch :query="queryAll" :options="searchOptAll" :search="handleSearch" />
            <div class="cardContainer">

                        <el-card shadow="hover" body-class="card-body">
                            <el-icon class="card-icon bg1">
                                <ShoppingCartFull />
                            </el-icon>
                            <div class="card-content">
                                <countup class="card-num color1" :end="allData.e_num" />
                                <div>总设备数</div>
                            </div>
                        </el-card>
                   
                        <el-card shadow="hover" body-class="card-body">
                            <el-icon class="card-icon bg2">
                               <CreditCard />
                            </el-icon>
                            <div class="card-content">
                                <countup class="card-num color2" :end="allData.h_num" />
                                <div>总还镜数</div>
                            </div>
                        </el-card>
                  
                        <el-card shadow="hover" body-class="card-body">
                            <el-icon class="card-icon bg3">
                               <ShoppingCartFull />
                            </el-icon>
                            <div class="card-content">
                                <countup class="card-num color3" :end="allData.jie_num" />
                                <div>总眼镜使用数</div>
                            </div>
                        </el-card>
                   
                        <el-card shadow="hover" body-class="card-body">
                            <el-icon class="card-icon bg4">
                                <CreditCard />
                            </el-icon>
                            <div class="card-content">
                                <countup class="card-num color4" :end="allData.n_num" />
                                <div>待还镜</div>
                            </div>
                        </el-card>
                  
                        <el-card shadow="hover" body-class="card-body">
                            <el-icon class="card-icon bg1">
                                <CreditCard />
                            </el-icon>
                            <div class="card-content">
                                <countup class="card-num color1" :end="allData.total_order" />
                                <div>总订单</div>
                            </div>
                        </el-card>
                
                        <el-card shadow="hover" body-class="card-body">
                            <el-icon class="card-icon bg2">
                               <CreditCard />
                            </el-icon>
                            <div class="card-content">
                                <countup class="card-num color2" :end="allData.w_order" />
                                <div>还镜订单数</div>
                            </div>
                        </el-card>
            </div>
        </div>

        <div class="container">
            <TableCustom :columns="columns" :tableData="tableData" :total="page.total"
                 :changePage="changePage" :change-page-size="changePageSize" :currentPage="page.page" :pageSize="page.page_size">
                <!-- <template #toolbarBtn>
                    <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
                </template> -->
                <template #f_status="{rows}">
                    <el-tag v-if="rows.f_status == 1" type="success">使用中</el-tag>
                    <el-tag v-else type="info">未使用</el-tag>
                </template>
                
            </TableCustom>

        </div>
    </div>
</template>

<script setup lang="ts" name="collaborativeAdministrator-user">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { query_total_analysis_data, query_e_analysis_data, query_list } from '@/api';
import TableCustom from '@/components/table-custom.vue';
import TableSearch from '@/components/table-search.vue';

const getNowTime = () => {
    return `${new Date().getFullYear()}-${(new Date().getMonth() + 1) > 9 ? (new Date().getMonth() + 1) : '0' + (new Date().getMonth() + 1)}-${new Date().getDate() > 9 ? new Date().getDate() : '0' + new Date().getDate()}`
}
// 查询总的数据
const queryAll = reactive({
    data_time: [getNowTime(), getNowTime()],
    f_province: null,
    f_code: null,
})

const searchOptAll= ref([
{ type: 'daterange', label: '时间范围：', prop: 'data_time', placeholder: '请选择时间范围', format: 'YYYY-MM-DD'},
{ type: 'province', label: '省份：', prop: 'f_province', placeholder: '请选择省份'},
{ type: 'select', label: '场地：', prop: 'f_code', placeholder: '请选择场地', opts: [], labelItem: 'f_field_name', valueItem: 'f_code' },
])

query_list({ "filter":"field" }).then(res =>{
    searchOptAll.value[2].opts = res.data
})
const allData = ref({
    e_num: 0,
    h_num: 0,
    jie_num: 0,
    n_num: 0,
    total_order: 0,
    w_order: 0
})

// 获取总数据
 
const getAllData = () =>{
    if (!queryAll.data_time) queryAll.data_time = []
    query_total_analysis_data({...queryAll}).then(res =>{
        if (res.code == '1000') {
            allData.value = res.data
        }
    })
}

getAllData()
const handleSearch = () => {
    getAllData();
    changePage(1);
};

// 表格相关
let columns = ref([
    { prop: 'f_field_name', label: '场地名称' },
    { prop: 'f_code', label: '场地编码' },
    
    { prop: 'f_province', label: '省份' },
    { prop: 'e_num', label: '设备数量' },
    { prop: 'h_num', label: '还镜数量' },
    { prop: 'jie_num', label: '借镜数量' },
    { prop: 'n_num', label: '待还镜' },
    { prop: 'total_order', label: '总订单' },
    { prop: 'w_order', label: '还镜订单' },
])
const page = reactive({
    page: 1,
    page_size: 10,
    total: 0,
})

const tableData = ref([]);
const getData = async () => {
    if (!queryAll.data_time) queryAll.data_time = []
    const res = await query_e_analysis_data({page: page.page, page_size: page.page_size, ...queryAll})
    tableData.value = res.data.data_list;
    page.total = res.data.total;
};
getData();

const changePage = (val: number) => {
    page.page = val;
    getData();
};
const changePageSize = (val: number) => {
    page.page_size = val;
    getData();
};

</script>
<style>
.card-body {
    display: flex;
    align-items: center;
    height: 50px;
    width: 160px;
    padding: 0;
    
}
</style>
<style scoped>
.cardContainer {
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    
}
.el-card {
        margin: 5px !important;
    }
.card-content {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
    padding: 0 10px;
}

.card-num {
    font-size: 20px;
}

.card-icon {
    font-size: 20px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
}

.bg1 {
    background: #2d8cf0;
}

.bg2 {
    background: #64d572;
}

.bg3 {
    background: #f25e43;
}

.bg4 {
    background: #e9a745;
}

.color1 {
    color: #2d8cf0;
}

.color2 {
    color: #64d572;
}

.color3 {
    color: #f25e43;
}

.color4 {
    color: #e9a745;
}
</style>